export const baseUsage = `
import {PhForm, PhFormColor, PhColor} from 'phoeon'
interface Color{
    disabled:{type:Boolean,default:false},
    value:{type:String,default:"#00000000"},
    preshow:{type:Boolean,default:true},
    precolors:{type:Array as PropType<Array<string>>}

    @change 改变事件
}
interface FormColor {
    ...同上
    @ph-change 取代@change
}

// note：
// PhFormColor（凡是PhForm为前缀的）表单组件需要以PhForm为父组件工作，如需单独使用，
// import {PhColor} from 'phoeon' 用法同PhFormColor 但是没有验证功能，并且 @change 替换 @ph-change
`;
export const demo1 = `
<ph-form>
    <!-- note： PhFormColor (凡是PhForm为前缀的) 表单组件需要以PhForm为父组件工作，如需单独使用，如下： -->
    <ph-divider>表单默认</ph-divider>
    <ph-form-color style="width:150px" :value="value" @ph-change="onChange"/>
    <ph-divider>表单关闭颜色预定义</ph-divider>
    <ph-form-color style="width:150px" :value="value" :preshow="false" @ph-change="onChange"/>
    <ph-divider>自定义颜色预定义 :precolors="['#ff0000','#ff0','#f0f','#0f0','#00f','#0ff']"</ph-divider>
    <ph-form-color style="width:150px" :value="value" :precolors="['#ff0000','#ff0','#f0f','#0f0','#00f','#0ff']" @ph-change="onChange"/>
    <ph-divider>表单禁止</ph-divider>
    <ph-form-color style="width:150px" :value="value" :disabled="true" @ph-change="onChange"/>
</ph-form>
`;
export const demo2 = `
<!-- import {PhColor} from 'phoeon' 用法同上但是没有验证功能, @change 替换 @ph-change -->
<ph-divider>表单默认</ph-divider>
<ph-color style="width:150px" :value="value" @change="onChange"/>
<ph-divider>表单关闭颜色预定义</ph-divider>
<ph-color style="width:150px" :value="value" :preshow="false" @change="onChange"/>
<ph-divider>自定义颜色预定义 :precolors="['#ff0000','#ff0','#f0f','#0f0','#00f','#0ff']"</ph-divider>
<ph-color style="width:150px" :value="value" :precolors="['#ff0000','#ff0','#f0f','#0f0','#00f','#0ff']" @change="onChange"/>
<ph-divider>表单禁止</ph-divider>
<ph-color style="width:150px" :value="value" :disabled="true" @change="onChange"/>
`;
